<template>
  <a-card size="small" v-for="item in fields" :key="item.title" :title="item.title">
    <a-form>
      <template v-if="item.type === 'array'">
        <template v-if="data[item.fields] && data[item.fields].length > 0">
          <a-row v-for="(dataItem, dataIdx) in data[item.fields]" :key="dataIdx">
            <a-col v-for="childItem in item.childFields" :key="childItem.fields" :span="childItem.span">
              <a-form-item :label="childItem.title" class="mb-10">
                {{ handleFormEmptyData(dataItem[childItem.field]) }}
              </a-form-item>
            </a-col>
          </a-row>
        </template>
        <template v-else>暂无{{ item.title }}数据</template>
      </template>

      <template v-else>
        <a-row>
          <a-col v-for="field in item.fields" :key="field.field" :span="field.span">
            <a-form-item :label="field.title" class="mb-10">
              {{ handleFormEmptyData(data[field.field]) }}
            </a-form-item>
          </a-col>
        </a-row>
      </template>
    </a-form>
  </a-card>
</template>

<script>
import { handleFormEmptyData } from '@/tools/filters'

export default {
  name: 'readonly-form',
  props: {
    fields: [Array],
    data: [Object]
  },
  setup() {
    return {
      handleFormEmptyData
    }
  }
}
</script>

<style scoped>

</style>
